<template>
  <div class="my-comment">
    <ht-header>我的评论</ht-header>
    <div class="list">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          :immediate-check="false"
          @load="onLoad"
        >
          <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
          <div class="item" v-for="item in commentList" :key="item.id">
            <div class="time">
              {{ item.create_date | time('YYYY-MM-DD HH:mm') }}
            </div>
            <div class="comment" v-if="item.parent">
              <div class="name">回复：{{ item.parent.user.nickname }}</div>
              <div class="comment_content">{{ item.parent.content }}</div>
            </div>
            <div class="content">{{ item.content }}</div>
            <div class="origin">
              <span class="one-txt-cut">原文：{{ item.post.title }}</span>
              <span class="iconfont iconjiantou1"></span>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
export default {
  created() {
    this.getCommentList()
  },
  methods: {
    onRefresh() {
      // console.log(this.refreshing + '   refreshing')
      setTimeout(() => {
        console.log('下拉刷新中')
        // 下拉刷新需要清除原来的数据
        this.commentList = []
        // 防止之前已经没有数据了
        this.finished = false
        this.loading = true
        // 重新加载第一页的数据
        this.pageIndex = 1
        this.getCommentList()
      }, 1000)
    },
    onLoad() {
      console.log('上拉加载中')
      // console.log(this.loading, '111111111111')
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        this.pageIndex++
        this.getCommentList()
      }, 1000)
    },
    async getCommentList() {
      const res = await this.$axios.get('/user_comments', {
        params: {
          pageIndex: this.pageIndex,
          pageSize: this.pageSize,
        },
      })
      // console.log(res.data)
      const { statusCode, data } = res.data
      if (statusCode === 200) {
        this.commentList = [...this.commentList, ...data]
        // this.commentList = data
        // console.log(this.commentList)
      }
      // 加载状态结束
      this.loading = false

      this.refreshing = false
      // 数据全部加载完成
      // 判断如果没有更多数据了，需要把finished改成true
      //  console.log(data.length, this.pageSize, '33333333333333')
      if (data.length < this.pageSize) {
        this.finished = true
      }
    },
  },
  data() {
    return {
      commentList: '',
      list: [],
      loading: false,
      finished: false,
      // 当前页
      pageIndex: 1,
      // 每页的条数
      pageSize: 5,
      // 默认FALSE 一旦下拉了 就会变成true--并且需要我们获取完数据主动改为FALSE
      refreshing: false,
    }
  },
}
</script>

<style lang="less" scoped>
.item {
  border-bottom: 1px solid #ccc;
  padding: 10px 20px;
  .time {
    color: #666;
    padding: 10px 0;
  }
  .comment {
    background-color: #ddd;
    padding: 10px;
    .name {
      color: #666;
      font-size: 14px;
    }
    .comment_content {
      color: #999;
      line-height: 30px;
      margin-top: 10px;
    }
  }
  .content {
    margin: 10px 0;
  }
  .origin {
    font-size: 14px;
    color: #999;
    display: flex;
    justify-content: space-between;
  }
}
</style>
